﻿@import "../../core/less/import.less";
@input-pre: ~"@{ui}-input";

.@{input-pre} {
    font-size: 12px;
    padding: 8px 12px;
    width: 374px;
    background-color: @color-background;
    border-radius: 3px;
    border: 1px solid @color-border-normal;
    .transition(all 0.15s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s);

    &:hover, &.wf-input-hover {
        border-color: @color-primary;
    }

    &:focus, &.@{input-pre}-focus {
        border-color: @color-primary;
        box-shadow: 0 0 0 2px rgba(16, 142, 233, 0.2);
    }
}

textarea.@{input-pre} {
    resize: vertical;
}

.@{input-pre}-disabled {
    cursor: default;
    background-color: @color-background-normal;
    border-color: @color-disabled;
    color: @color-disabled;

    &:hover {
        border-color: @color-disabled;
    }
}

.@{input-pre}-large {
    padding-top: 11px;
    padding-bottom: 11px;
}

.@{input-pre}-small {
    padding-top: 4px;
    padding-bottom: 4px;
}

.@{input-pre}-label {
    .ut-clearfix;

    .@{input-pre}-addon {
        float: left;
        position: relative;

        .@{ui}-select {
            .@{ui}-select-selection {
                background-color: @color-background-normal;
                border-radius: 3px 0 0 3px;

                .@{ui}-select-selection-value {
                    width: 62px;
                }

                &:hover {
                    background-color: @color-background-normal;
                    border-color: @color-disabled;
                }
            }

        }

        .@{ui}-select-open {
            .@{ui}-select-selection {
                background-color: @color-background-normal;
                border-color: @color-disabled;
                box-shadow: none;
            }
        }
    }

    .@{input-pre}-addon-suffix {
        padding: 8px 12px;
        border: 1px solid @color-disabled;
        border-radius: 0 3px 3px 0;
        margin-left: -1px;
        background-color: @color-background-normal;
    }

    .@{input-pre}-addon-prefix {
        padding: 8px 12px;
        border: 1px solid @color-disabled;
        border-radius: 3px 0 0 3px;
        margin-left: -1px;
        background-color: @color-background-normal;

        & + .@{ui}-input {
            border-radius: 3px;
        }
    }

    .@{input-pre} {
        position: relative;
        margin-left: -1px;
        float: left;
        border-radius: 0;
        cursor: default;

        &:hover, &:focus {
            z-index: 1;
        }
    }
}

.@{input-pre}-icon {
    display: inline-block;
    position: relative;

    .@{input-pre} {
        width: 200px;
    }

    .@{ui}-icon {
        position: absolute;
        right: 0;
        top: 0;
        padding: 7px;
        cursor: pointer;

        &:hover {
            color: @color-primary;
        }
    }
}
